<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <title>取货界面</title>
    <style>
        .container{
            width: 1280px;
            height: 400px;
            margin: 100px auto 0;
        }
        .box{
            width: 40%;
            height: 60%;
            background-color: #fff;
            margin: 40px 0px 40px 80px;
            box-shadow:5px 0px 10px gray;
            float: left;
        }
        .box h2{
            text-align: center;
            color: rgb(155, 63, 192);
            font-size: x-large;
        }
        .container .layui-form-item{
            margin-top: 16%;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }
        @media screen and (min-width: 320px) and (max-width: 1000px){
			.container{
                width: 100%;
                height: 100%;
            }
            .box{
                width: 86%;
                background-color: #fff;
                margin-left: 7%;
                box-shadow:5px 0px 10px gray;
                float: left;
            }
            .box h2{
                text-align: center;
                color: rgb(155, 63, 192);
                font-size: x-large;
            }
            .container .layui-form-item{
                margin-top: 16%;
            }
            .info{
                font-size: 14px;
                color: rgb(110, 108, 108);
                line-height: 36px;
            }
            .layui-btn{
                width: 75%;
                margin-left: 13%;
            }
        } 
    </style>
</head>
<body>
    
    <form class="layui-form container" action="">
        <div class="box machine-box">
            <h2>选择收货点</h2>
            <div class="layui-form-item">
                <label class="layui-form-label">机器号：</label>
                <div class="layui-input-inline">
                    <select name="machineId" lay-verify="required" id="machineId">
                        <option value="">加载失败</option>
                        
                    </select>
                  <!-- <input type="text" name="machineId" id="machineId" required lay-verify="required|number" placeholder="机器号" autocomplete="off" class="layui-input"> -->
                </div>
            </div>
        </div>
        <div class="box pick-box">
            <h2>输入取货码</h2>
            <div class="layui-form-item">
                <label class="layui-form-label">取货码：</label>
                <div class="layui-input-inline">
                  <input type="text" name="pickId" id="pickId" required lay-verify="required|number|pass" placeholder="取货码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-radius" lay-submit lay-filter="orderBy">查询订单</button>
    </form>

    <div id="orderDetails" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block id_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block userid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单时间</label>
            <div class="layui-input-block createdate_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block orderstatus_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">付款方式</label>
            <div class="layui-input-block paymethod_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">付款订单</label>
              <div class="layui-input-inline payorderid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">付款时间</label>
              <div class="layui-input-inline paydate_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">配货码</label>
            <div class="layui-input-block ordermark_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">机器ID</label>
              <div class="layui-input-inline machineid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">格子柜号</label>
              <div class="layui-input-inline containernumber_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单总价</label>
            <div class="layui-input-block amount_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block comment_info1 info"></div>
        </div>

        <table class="layui-table" lay-skin="line">
            <thead>
                <tr>
                  <th>商品名称</th>
                  <th>商品规格</th>
                  <th>商品单价</th>
                  <th>商品数量</th>
                </tr> 
            </thead>
            <tbody id="commodities_info1"></tbody>
        </table>
    </div>

    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script src="/static/lib/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            
            var num = localStorage.getItem("machineId")
            
            $.ajax({
                type: "post",
            //TODO:
                url: "/supplier/bookOrderAdmin/getMachineListForSupplier",
                dataType: "json",
                async: false,
                success: function(mag){
                    var mag = mag.data
                    var tag = '<option value="">机器号</option>'
                    for (let i = 0; i < mag.length; i++) {
                        if (mag[i].id == num) {
                            var tag1 = '<option selected="selected" value="'+ mag[i].id +'">'+ mag[i].place +'</option>'
                        }else{
                            var tag1 = '<option value="'+ mag[i].id +'">'+ mag[i].place +'</option>'
                        }
                        tag += tag1
                    }
                    $("#machineId").html(tag)
                },
                error: function(){
                    alert('查询失败，请重新登录')
                }
            })
            layui.use(['form', 'util'], function(){
                var $ = layui.$
                var form = layui.form;
                
                

                // if (localStorage.getItem("machineId") == '') {
                //     $("#machineId").attr('placeholder','机器号')
                // }else{
                //     $("#machineId").attr('value',localStorage.getItem("machineId"))
                // }
                //监听提交
                form.on('submit(orderBy)', function(data){
                    

                    localStorage.setItem("machineId", $("#machineId").val());

                    $.ajax({
                        type: "post",
                        //TODO:
                        url: "/supplier/bookOrderAdmin/queryOrderByPickCode",
                        data: {machineId: data.field.machineId,pickCode: data.field.pickId},
                        dataType: "json",
                        success: function(mag){
                            if (mag.success == true) {

                                $(".id_info1").html('<span style="color: #f173e1;">'+mag.data.id+'</span>')
                                $(".userid_info1").html(mag.data.user_id)
                                $(".createdate_info1").html(ctime(mag.data.create_date))
                                $(".orderstatus_info1").html(orderstatusfun(mag.data.order_status))
                                $(".machineid_info1").html(mag.data.machine_id)
                                $(".containernumber_info1").html(status(mag.data.container_number))
                                $(".amount_info1").html('<span style="color: #f173e1;">'+mag.data.amount+'</span>')
                                $(".comment_info1").html(mag.data.comment)
                                $(".paymethod_info1").html(paymethodfun(mag.data.pay_method))
                                $(".payorderid_info1").html(status(mag.data.pay_order_id))
                                $(".paydate_info1").html(ctime(mag.data.pay_date))
                                $(".ordermark_info1").html(markstatus(mag.data.order_mark))
                                var commodities = mag.data.commodities
                                if (commodities.length != 0) {
                                    var flag = ''
                                    for (var i = 0; i < commodities.length; i++) {
                                        var flag1 = '<tr><td>'+ commodities[i].commodityName +'</td><td>'+ commodities[i].specifications +'</td><td>'+ commodities[i].price +'</td><td>'+ commodities[i].count +'</td></tr>' 
                                        flag += flag1 
                                    }
                                    $("#commodities_info1").html(flag)
                                }

                                layer.open({
                                    type: 1,
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['88%', '90%'], //宽高
                                    title: '订单详细',
                                    btn: ['取货','取消'],
                                    content: $('#orderDetails'),
                                    yes: function(index){
                                        $.ajax({
                                            type: "post",
                                            //TODO:
                                            url: "/supplier/bookOrderAdmin/determinePickUpOrder",
                                            data: {orderId: mag.data.id},
                                            dataType: "json",
                                            success: function(res){
                                                layer.msg(res.message);
                                                layer.close(index);
                                            },
                                            error: function(){
                                                layer.msg('接受订单发生错误');
                                            }
                                        })
                                    }
                                })
                            } else {
                                layer.msg(mag.message);
                            }
                        },
                        error: function(){
                            layer.msg('查询订单失败');
                        }
                    })
                    return false;
                });

                form.verify({
                    pass: [
                        /^[\S]{6}$/,
                        '取货码必须6位，且不能出现空格'
                    ] 
                });

            });
        })


        function dateTime(date) {
            if (date != '') {
                var dateTime = new Date(date).getTime()
            }else{
                var dateTime = ''
            }
            return dateTime
        }
        function ctime(num) {
            if (num == null) {
                var ctime = '订单未完成'
            }else {
                var ctime = layui.util.toDateString(Number(num), "yyyy.MM.dd HH:mm:ss")
            }
            return ctime
        }
        function status(num) {
            if(num == null) {
                var status = '订单未完成'
            }else {
                var status = num
            }
            return status
        }
        function markstatus(num) {
            if(num == null) {
                var status = '订单完成'
            }else {
                var status = num
            }
            return status
        }
        function orderstatusfun(num) {
            if (num == 0) {
                var orderstatus = '未付款'
            }else if (num == 1) {
                var orderstatus = '<span style="color: rgb(222, 130, 235);">未发货</span>'
            }else if (num == 2) {
                var orderstatus = '未取货'
            }else if (num == 3) {
                var orderstatus = '订单完成'
            }else{
                var orderstatus = '订单未完成'
            }
            return orderstatus
        }
        function paymethodfun(num) {
            if (num == '0') {
                var paymethod = '支付宝'
            }else if (num == '1'){
                var paymethod = '微信'
            }else if (num == '2'){
                var paymethod = '账户余额'
            }else {
                var paymethod = '其他支付方式'
            }
            return paymethod
        }
    </script>
</body>
</html>